<template>
    <div class="wu_box"></div>
</template>

<script>
import * as echarts from 'echarts'
import '@/assets/js/china'
export default {
    props: ['provinceData'],
    data() {
        return {
            echartList: [],
            dataList: [
                { name: '南海诸岛', value: 0 },
                { name: '北京', value: 0 },
                { name: '天津', value: 0 },
                { name: '上海', value: 0 },
                { name: '重庆', value: 0 },
                { name: '河北', value: 0 },
                { name: '河南', value: 0 },
                { name: '云南', value: 0 },
                { name: '辽宁', value: 0 },
                { name: '黑龙江', value: 0 },
                { name: '湖南', value: 0 },
                { name: '安徽', value: 0 },
                { name: '山东', value: 0 },
                { name: '新疆', value: 0 },
                { name: '江苏', value: 0 },
                { name: '浙江', value: 0 },
                { name: '江西', value: 0 },
                { name: '湖北', value: 0 },
                { name: '广西', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '山西', value: 0 },
                { name: '内蒙古', value: 0 },
                { name: '陕西', value: 0 },
                { name: '吉林', value: 0 },
                { name: '福建', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0 },
                { name: '青海', value: 0 },
                { name: '西藏', value: 0 },
                { name: '四川', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '海南', value: 0 },
                { name: '台湾', value: 0 },
                { name: '香港', value: 0 },
                { name: '澳门', value: 0 },
            ]
        }
    },
    mounted() {
        this.getEchartList()
    },
    methods: {
        async getEchartList() {


            this.dataList.forEach(item => {
                const obj = this.provinceData.find(v => {
                    let ref = /省|回族自治区|壮族自治区|自治区|维吾尔自治区/g
                    return v.name.replace(ref, '') === item.name
                })
                if(obj){
                    item.value=obj.value
                }
            })



            // this.echartList = res.year
            // console.log(this.echartList);
            const myEchart = echarts.init(document.querySelector('.wu_box'))
            const option = {
                title: {
                    text: "籍贯分布",
                    top: 40,
                    left: 40
                },
                visualMap: {
                    min: 0,
                    max: 6,
                    left: '30',
                    bottom: '30',
                    text: ['6', '0'],
                    orient: 'vertical',
                    inRange: {
                        color: ['#e0ffff', '#006edd'],
                        symbolSize: [100, 100]
                    }
                },
                tooltip: {
                    padding: 8,
                    formatter: "{b}:{c}位学员",
                    enterable: true,
                    transitionDuration: 1,
                    backgroundColor: 'rgba(0,0,0,0.4)',
                    borderColor: "transparent",
                    textStyle: {
                        color: '#fff',
                        decoration: 'none',
                    }
                },
                series: [{
                    name: '机关分布',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    label: {
                        normal: { //静态的时候展示样式
                            show: true, //是否显示地图省份得名称
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            }
                        },
                        emphasis: { //动态展示的样式
                            color: '#fff',
                        },
                    },
                    data: this.dataList
                },]
            }
            myEchart.setOption(option)
        }
    },
}
</script>

<style>
.wu_box {
    width: 100%;
    height: 100%;
}
</style>